<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>订单中心</title>
    <link rel="icon " href="icon/favicon.ico">

    <!--css代码-->
    <link href="css/market.css" rel="stylesheet" type="text/css">
    <!--jquery库-->
    <script src="js/jquery-3.3.1.js"></script>
    <!--js代码-->
    <script src="js/common.js" type="text/javascript"></script>
    <script type="text/javascript" src="js/js/distpicker.data.js"></script>
    <script type="text/javascript" src="js/js/distpicker.js"></script>
    <script type="text/javascript" src="js/js/main.js"></script>
</head>
<body>
<div class="headerBar">
    <div class="topBar">
        <div class="comWidth">
            <div class="leftArea">
                <a id='hello'  href="login.html" class="link-login">您好，<span>请登录</span></a>&nbsp;&nbsp;
                <a id='hello2'  href="registe.html" class="link-regist style-red">免费注册</a>
            </div>
            <div class="rightArea">
                <ul class="fr">
                    <span class="fore1" ><a target="_blank" href="shopcar.html" style="text-align: center"><img class='shopCar' src="icon/shopCar.png">购物车</a></span>
                    <span class="fore1" ><a target="_blank" href="order.html">我的订单</a></span>
                    <span class="fore1" ><a href="account.html">个人中心</a></span>
                </ul>
            </div>
        </div>
    </div><!--topBar结束-->
    <div class="logoBar">
        <div class="comWidth">
            <div class="logo fl">
                <a href="index.html"><img class='company_logo'src="../img/logo11.jpg" alt="XX网"/></a>
            </div>
            <div class="searchBox fl">
                <input type="text" class="search_text fl" id="key">
                <!--<input type="submit" value="搜索" class="search_btn fr"/>-->
                <button class='search_btn'>搜索</button>
            </div>
        </div>
    </div><!--logoBar结束-->
</div>
<div style="margin-left: 150px; margin-right: 150px; width: calc(100% - 320px); border: 1px solid silver; border-radius: 5px;opacity: 0.8;height: 50px;">
    <p style="height: 50px; line-height: 50px; width: calc(100% - 30px); margin-left: 30px; ">订单中心</p>
</div>


<div class="orderList">
    <div class="orderListTitle">
        <a class="allorders active">全部订单</a>
        <a class="NoPay">待支付 </a>
        <a class="NoReceive">待收货</a>
        <a class="NoComment">待评价</a>
    </div><br><br>


    <div class="orderListTitle-1" >
        <span style="float: left; margin-left: 30px">订单详情</span>
        <label>操作</label>
        <label>订单状态</label>
        <label>金额</label>
        <label>收货人</label>
    </div>

    <div class="order">
        <!--<div class="OrderTitle">-->
            <!--<label>2018-12-19 17:09:23</label>-->
            <!--<label>订单号：<span> 83590513794</span></label>-->
            <!--<label><a href="shop.html?id=">二手图书专营店</a></label>-->
        <!--</div>-->
        <!--<div class="goodsInfo">-->
            <!--<img src="images/计算机组成原理.jpg">-->
            <!--<a href="detail.html?id=1" target="_blank">计算机组成原理 高等教育出版社 第三部 罗克著</a>-->
        <!--</div>-->
        <!--<div class="operation">-->
            <!--<input type="button" value="再次购买">-->
        <!--</div>-->
        <!--<div class="status">-->
            <!--<label>已完成</label>-->
        <!--</div>-->
        <!--<div class="count">-->
            <!--<label>总金额：</label>-->
            <!--<label>45.0</label>-->
            <!--<label>在线支付</label>-->
        <!--</div>-->
        <!--<div class="owner">-->
            <!--<label>梁恒</label>-->
            <!--<img src="icon/头像.png">-->
        <!--</div>-->
    </div>
</div>

<div class="back-to-top" style="display:none"><a>返回<br />顶部</a></div>

<div class="footer">
    <p><a href="#">网站简介</a><i>|</i><a href="#">公告</a><i>|</i> <a href="#">招纳贤士</a><i>|</i> <a href="#">联系我们</a><i>|</i>客服热线：400-675-1234</p>
    <p>Copyright &copy; 2007 - 2018 版权所有&nbsp;&nbsp;&nbsp;京ICP备09037834号&nbsp;&nbsp;&nbsp;京ICP证B1034-8373号&nbsp;&nbsp;&nbsp;某市公安局XX分局备案编号：123456789123</p>
</div>

</body>
</html>

<script>
    getData()
    jQuery(function ($) {
        //当滚动条的位置处于距顶部20像素以下时，跳转链接出现，否则消失
        $(window).scroll(function(){
            if (jQuery(window).scrollTop()>20){
                jQuery(".back-to-top").fadeIn(2000);
            }
            else
            {
                jQuery(".back-to-top").fadeOut(2000);
            }
        });

        //当点击跳转链接后，回到页面顶部位置

        jQuery(".back-to-top").click(function(){
            jQuery('body,html').animate({scrollTop:0},200);
            return false;
        });
    });
    $(document).ready(function () {
        var name=sessionStorage.getItem('name');
        if(name!==null&&(name)!==undefined){
            if((/^[a-zA-Z0-9]{6,11}$/).test(name)){
                $('#hello2').hide();
                $('#hello  ').html('您好，'+name);
            }
        }
    })

    function getData(){
        $.ajax({
            url:'orders.json',
            type: 'get',
            dataType:'json',
            success:function (res) {
                $.ajax({
                    url:'orders.json',
                    type: 'get',
                    dataType:'json',
                    success:function (res) {
                        $.each(res.goods, function(idx,val) {
                            var str='<div class="orderItem"><div class="OrderTitle">\n' +
                                '            <label>'+val.date+"</label>\n" +
                                "            <label>订单号：<span>"+val.orderID+'</span></label>\n' +
                                '            <label><a href="shop.html?id='+val.shopID+'">'+val.shop+'</a></label>\n' +
                                '        </div>\n' +
                                '        <div class="goodsInfo">\n' +
                                '            <img src="'+val.imgUrl+"\">\n" +
                                "            <a href=\"detail.html?id="+val.id+" \" target=\"_blank\">"+val.title+" "+val.publish+" "+val.author+" "+"</a>\n" +
                                "        </div>\n" +
                                "        <div class=\"operation\">\n" +
                                '<label><a href="shop.html?id='+val.shopID+'">'+'再次购买'+'</a></label>\n' +
                                "        </div>\n" +
                                "        <div class=\"status\">\n" +
                                "            <label>"+val.status+"</label>\n" +
                                "        </div>\n" +
                                "        <div class=\"count\">\n" +
                                "            <label>总金额："+"</label>\n" +
                                "            <label>"+val.total+"</label>\n" +
                                "            <label>"+val.payType+"</label>\n" +
                                "        </div>\n" +
                                "        <div class=\"owner\">\n" +
                                "            <label>梁恒</label>\n" +
                                "            <img src=\"icon/头像.png\">\n" +
                                "        </div>\n" +
                                "    </div></div>\n"

                            $('.order').append(str)
                        })
                    }
                })
            }
        })
    }

    function getNoCommentData(){
        $.ajax({
            url:'orders.json',
            type: 'get',
            dataType:'json',
            success:function (res) {
                $.each(res.NoComment, function(idx,val) {
                    var str='<div class="orderItem"><div class="OrderTitle">\n' +
                        '            <label>'+val.date+"</label>\n" +
                        "            <label>订单号：<span>"+val.orderID+'</span></label>\n' +
                        '            <label><a href="shop.html?id='+val.shopID+'">'+val.shop+'</a></label>\n' +
                        '        </div>\n' +
                        '        <div class="goodsInfo">\n' +
                        '            <img src="'+val.imgUrl+"\">\n" +
                        "            <a href=\"detail.html?id="+val.id+" \" target=\"_blank\">"+val.title+" "+val.publish+" "+val.author+" "+"</a>\n" +
                        "        </div>\n" +
                        "        <div class=\"operation\">\n" +
                        '<label><a href="comment.html?shopid='+val.shopID+'&bookid='+val.id+'">'+'去评价'+'</a></label>\n' +
                        "        </div>\n" +
                        "        <div class=\"status\">\n" +
                        "            <label>"+val.status+"</label>\n" +
                        "        </div>\n" +
                        "        <div class=\"count\">\n" +
                        "            <label>总金额："+"</label>\n" +
                        "            <label>"+val.total+"</label>\n" +
                        "            <label>"+val.payType+"</label>\n" +
                        "        </div>\n" +
                        "        <div class=\"owner\">\n" +
                        "            <label>梁恒</label>\n" +
                        "            <img src=\"icon/头像.png\">\n" +
                        "        </div>\n" +
                        "    </div></div>\n"

                    $('.order').append(str)
                })
            }
        })
    }

    $('.orderListTitle a').click(function () {
        $(this).addClass('active').siblings().removeClass('active')
        $('.orderItem').remove()
    })

    $('.NoComment').click(function () {
        getNoCommentData()
    })

    $('.allorders').click(function () {
        getData()
    })

    // $('body').on('click', '.buyAgain',function () {
    //     window.location.href=
    // })

</script>